<template>
    <el-cascader style="width:100%;"
                size="mini"
                clearable
                :disabled="disabled"
                :options="options"
                v-model="selectedOptions"
                :change-on-select="change_on_select"
                @change="handleChange"
                :props="props">
        </el-cascader>
</template>
<script>
    import AreaList from '../../utils/area';
    export default {
        name: 'area-select',
        data() {
            return {
                options: [],
                selectedOptions: [],
                props: {
                    label: 'label',
                    value: 'id',
                    children: 'children'
                }
            }
        },
        created() {
            if(this.value) {
                this.setValue(this.value)
            }
            this.getAreaList();
        },
        props: {
            value: {
                type: String
            },
            disabled: {
                type: Boolean
            },
            change_on_select: {
                type: Boolean
            }
        },
        watch: {
            value(val) {
                this.setValue(val)
            }
        },
        methods: {
            setValue(val) {
                this.selectedOptions = val ? val.split(',') : [];
            },
            handleChange(value) {
                const v = value ? value.join(",") : ""
                this.$emit('input', v);
                this.$emit('change');
            },
            getAreaList() {
                let result = [];
                for(let i in AreaList.province_list){
                    //城市
                    let index = i.slice(0, 2)
                    let city_list = [];
                    for(let city in AreaList.city_list){
                        if(city.indexOf(index) === 0) {
                            let county_list = [];
                            let city_index = city.slice(0, 4)
                            for(let county in AreaList.county_list){
                                if(county.indexOf(city_index) === 0) {
                                    county_list.push({
                                        id: county,
                                        label: AreaList.county_list[county]
                                    })
                                }
                            }
                            if(county_list.length > 0) {
                                city_list.push({
                                    id: city,
                                    label: AreaList.city_list[city],
                                    children: county_list
                                })
                            } else {
                                city_list.push({
                                    id: city,
                                    label: AreaList.city_list[city]
                                })
                            }
                        }
                    }
                    if(city_list.length > 0) {
                        result.push({
                            id: i,
                            label: AreaList.province_list[i],
                            children: city_list
                        })
                    } else {
                        result.push({
                            id: i,
                            label: AreaList.province_list[i]
                        })
                    }
                }

                this.options = result;
            }
        }
    }
</script>